<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>部门列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css(t=2)}" media="all">
    <link rel="stylesheet" th:href="@{/febs/css/febs.css(t=2)}" media="all">
    <link rel="stylesheet" th:href="@{/febs/css/login.css(t=2)}" media="all">
    <link rel="icon" th:href="@{/febs/images/favicon.ico}" type="image/x-icon"/>
    <style>
        body{
            background-image: url("/images/futa.png");
            background-size: 100% 100%;
            color: #ffffff;
            font-size: 30px;
            height: 100%}
        .header{
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            height: 10%;
        }
        .content{
            height: 90%;
            padding-top: 20px;
        }
        .layui-breadcrumb a{color: #ffffff;font-size: 30px}
        .content .layui-card .layui-card-header{font-size: 20px; text-align: center}
        .content .layui-card .layui-card-body{height: 700px;font-size: 20px;}
        .dept-list{margin-top: 20px}
    </style>
</head>
<body>

<div class="layui-bg-orange header" >
    <div class="layui-col-md3">
        <span class="layui-breadcrumb" lay-separator="—">
        <a ><i class="layui-icon" style="font-size: 30px">&#xe68e;</i>首页</a>
        <a><cite>部门列表</cite></a>
        </span>
    </div>
    <div class="layui-col-md3 layui-col-md-offset6">
        <span class="layui-breadcrumb" lay-separator="—">
        <a href="javascript:history.go(-1);" style="float: right"><i class="layui-icon"style="font-size: 30px" >&#xe65a;</i>返回</a>
        </span>
    </div>

</div>
<div class="layui-container content">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header" >
                <i class="layui-icon layui-icon-list" style="font-size: 30px; color: #00a0e9;"></i>
                部门列表
            </div>
            <div class="layui-card-body">
                <div th:each="dept : ${deptList}" th:if="${dept.deptName} ne ''" class="layui-col-md4 dept-list">
                    <img th:id="'icon-'+${dept.deptId}" width="20px" height="20px">
                    <a th:href="'/policy/policyList/'+${dept.deptId}" th:text="${dept.deptName}"></a>
                </div>
            </div>
        </div>
    </div>

</div>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="javascript">
    var deptList = [[${deptList}]]
    layui.use(['element','layer','jquery'], function(){
        var element = layui.element,
            layer = layui.layer,
            $ = layui.jquery;

        //部门图标的显示
        $.each(deptList,function(index,item){
            $.ajax({
                type: "GET",
                url:'/icon/iconShow?id=' + item.iconId,
                data: {},
                success: function(result) {
                    //ajax调用成功后返回的是图片的base64数据
                    $('#icon-'+item.deptId).attr("src",result);
                }
            })
        })
    });
</script>
</body>
</html>

